<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="105">
          <FormItem label="文本">
            <Input size="small" v-model="text" />
          </FormItem>
          <FormItem label="背景色">
            <PnColorPicker size="small" v-model="backgroundColor" alpha recommend/>
          </FormItem>
          <FormItemPanel title="渐变色">
            <FormItem label="开启">
              <i-switch v-model="useShade">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="起始颜色">
              <PnColorPicker size="small" v-model="startColor" alpha recommend/>
            </FormItem>
            <FormItem label="结束颜色">
              <PnColorPicker size="small" v-model="endColor" alpha recommend/>
            </FormItem>
            <FormItem label="角度">
              <Slider v-model="shadeAngle" show-input :step="1" :min="0" :max="360"></Slider>
            </FormItem>
          </FormItemPanel>
          <FormItem label="字体颜色">
            <PnColorPicker size="small" v-model="color" alpha recommend/>
          </FormItem>
          <FormItem label="字体大小">
            <InputNumber size="small" :max="10000" :min="1" v-model="fontSize"></InputNumber> px
          </FormItem>
          <!--<FormItem label="行高">
            <InputNumber size="small" :max="10000" :min="1" v-model="lineHeight"></InputNumber> px
          </FormItem>
          <FormItem label="对齐方式">
            <Select transfer size="small" v-model="textAlign">
              <Option v-for="item in $PnDict.textAligns" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>-->

          <FormItemPanel title="背景图">
            <UploadImageButton v-model="imageRelativePath" :page-id="$PnUtil.getUrlParam('page_id')"></UploadImageButton>
            <FormItem label="图片相对路径">
              <i-input size="small" v-model="imageRelativePath">
                <Button slot="append" icon="md-close" @click="imageRelativePath = ''"></Button>
              </i-input>
            </FormItem>
            <FormItem label="背景重复">
              <Select :transfer="true" size="small" v-model="imageRepeat">
                <Option v-for="item in $PnDict.backgroundRepeats" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="背景图尺寸">
              <Input size="small" v-model="imageSize" placeholder="参考CSS的background-size"/>
            </FormItem>
          </FormItemPanel>

          <FormItemPanel title="边框">
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="borderColor" alpha recommend/>
            </FormItem>
            <FormItem label="边框宽度">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderWidth"></InputNumber> px
            </FormItem>
            <FormItem label="边框类型">
              <Select size="small" v-model="borderStyle">
                <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="圆角-上左">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderTopLeftRadius"></InputNumber> px
            </FormItem>
            <FormItem label="圆角-上右">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderTopRightRadius"></InputNumber> px
            </FormItem>
            <FormItem label="圆角-下右">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderBottomRightRadius"></InputNumber> px
            </FormItem>
            <FormItem label="圆角-下左">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderBottomLeftRadius"></InputNumber> px
            </FormItem>
          </FormItemPanel>

          <!--<FormItemPanel title="鼠标滑入滑出样式切换">
            <FormItem label="背景色">
              <PnColorPicker size="small" v-model="backgroundColorHover" alpha recommend/>
            </FormItem>
            <FormItem label="文本色">
              <PnColorPicker size="small" v-model="textColorHover" alpha recommend/>
            </FormItem>
            <FormItem label="文本阴影样式">
              <Input size="small" v-model="textShadowHover" placeholder="示例：0px 0px 5px #000"/>
            </FormItem>
          </FormItemPanel>-->

        </Form>

      </TabPane>

      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <Form :label-width="105">
            <FormItemPanel title="页面跳转">
              <Alert style="padding-right: 10px !important;" type="info" show-icon>开启URL跳转将会覆盖内置鼠标交互以及单击时运行脚本</Alert>
              <FormItem label="开启URL跳转">
                <i-switch v-model="useLink">
                  <span slot="open"></span>
                  <span slot="close"></span>
                </i-switch>
              </FormItem>
              <FormItem label="跳转地址">
                <Tooltip :max-width="200" placement="left" class="w-full"
                         content="如果需要平台内页面跳转，建议使用${BASE_PATH}读取项目根路径，后面接页面相对路径(path)，例如：${BASE_PATH}/1234567890">
                  <Input size="small" v-model="link" />
                </Tooltip>
              </FormItem>
              <FormItem label="跳转方式">
                <Select transfer size="small" v-model="linkTarget">
                  <Option v-for="item in $PnDict.targets" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
            </FormItemPanel>
          </Form>
          <MouseInteractionSender :mouseTypes="['click','mouseenter','mouseleave']"></MouseInteractionSender>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
          <FormItemPanel title="鼠标单击时运行脚本">
            <CodeEditor v-model="clickHandleScript"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'CustomButtonCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({

        backgroundColor: 'component.compConfigData.backgroundColor',

        useShade: 'component.compConfigData.useShade',
        startColor: 'component.compConfigData.startColor',
        endColor: 'component.compConfigData.endColor',
        shadeAngle: 'component.compConfigData.shadeAngle',

        borderWidth: 'component.compConfigData.borderWidth',
        borderColor: 'component.compConfigData.borderColor',
        borderStyle: 'component.compConfigData.borderStyle',

        borderTopLeftRadius: 'component.compConfigData.borderTopLeftRadius',
        borderTopRightRadius: 'component.compConfigData.borderTopRightRadius',
        borderBottomLeftRadius: 'component.compConfigData.borderBottomLeftRadius',
        borderBottomRightRadius: 'component.compConfigData.borderBottomRightRadius',

        text: 'component.compConfigData.text',
        fontSize: 'component.compConfigData.fontSize',
        color: 'component.compConfigData.color',
        textAlign: 'component.compConfigData.textAlign',
        lineHeight: 'component.compConfigData.lineHeight',

        backgroundColorHover: 'component.compConfigData.backgroundColorHover',
        textColorHover: 'component.compConfigData.textColorHover',
        textShadowHover: 'component.compConfigData.textShadowHover',

        useLink: 'component.compConfigData.useLink',
        link: 'component.compConfigData.link',
        linkTarget: 'component.compConfigData.linkTarget',

        imageRelativePath: 'component.compConfigData.imageRelativePath',
        imageRepeat: 'component.compConfigData.imageRepeat',
        imageSize: 'component.compConfigData.imageSize',

        clickHandleScript: 'component.compConfigData.clickHandleScript',

      })
    }
  }
</script>

<style scoped>

</style>
